<template>
  <div>
    <el-card shadow="never">
      <h3>我的投票</h3>
    </el-card>
    <br>
    <el-card shadow="never">
      <data-table :table-data="tableData">

        <el-table-column
          label="投票标题"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="投票描述"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.desc }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === 0" size="mini" type="success">投票中</el-tag>
            <el-tag v-if="scope.row.state === 1" size="mini" type="danger">投票结束</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="#"
          align="center"
        >
          <template slot-scope="scope">
            <el-link v-if="scope.row.state === 1 && scope.row.resultType === '结果可见'" size="mini" type="danger" @click="resultBtn(scope.row)">查看结果</el-link>
            <span v-if="scope.row.state === 1 && scope.row.resultType === '结果不可见'">结果不可见</span>
          </template>
        </el-table-column>

      </data-table>
    </el-card>

    <!-- 结果查看模态框 -->
    <el-dialog
      :title="`查看结果   ${current.title}`"
      :visible.sync="resultVisible"
      width="50%"
    >
      <h4>参数总人数： 1人</h4>
      <el-table :data="current.itemList">
        <el-table-column
          label="序号"
          align="center"
          fixed=""
          width="80"
        >
          <template slot-scope="props">
            <span>{{ props.row.no }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="选项内容"
          align="center"
        >
          <template slot-scope="props">

            <span>{{ props.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="选择人数"
          align="center"
        >
          <template slot-scope="props">

            <el-progress :text-inside="true" :stroke-width="16" :percentage="getPercent(current.itemList, props.row.count)" />
            <span>{{ props.row.count }}人</span>

          </template>
        </el-table-column>
      </el-table>

    </el-dialog>

  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import * as voteApi from '@/api/vote'
import { getUser } from '@/utils/auth'
export default {
  name: '',
  components: {
    DataTable
  },
  data() {
    return {
      tableData: [],
      resultVisible: false,
      current: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      voteApi.getJoinByUserId(getUser().id).then(resp => {
        this.tableData = resp.data
      })
    },
    // 得到选项的百分比
    getPercent(list, count) {
      const sum = list.reduce((pre, next) => {
        console.log(pre, next.count)
        return pre + next.count
      }, 0)
      const p = count / sum * 100
      console.log(sum)
      return parseFloat(p.toFixed(2))
    },
    resultBtn(row) {
      this.current = row
      this.resultVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.flex{
  display: flex;
}
</style>
